<template>
    <div>
        <table class="table">
            <tbody class="table">
                <tr>
                    <td>户型名称</td>
                    <td>
                        <input type="text" v-model="can.name">
                    </td>
                </tr>
                <tr>
                    <td>结构类型</td>
                    <td>
                        <select v-model="can.id">
                            <option :value="0">==请选择==</option>
                            <option v-for="a in showdata" :value="a.tid">{{a.tname}}</option>
                        </select>
                        <button class="btn btn-outline-primary"  @click="show">查询</button>
                        <button class="btn btn-outline-primary"  @click="add">新增</button>
                        <button class="btn btn-outline-primary"  @click="Asc(true)">默认排序(建筑面积)</button>
                        <button class="btn btn-outline-primary"  @click="Asc(false)">倒序排序（建筑面积）</button>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <table class="table">
            <thead class="table-danger">
                <tr>
                    <td>序号</td>
                    <td>户型名称</td>
                    <td>套内面积</td>
                    <td>建筑面积</td>
                    <td>户型图</td>
                    <td>结构类型</td>
                    <td></td>
                </tr>
            </thead>
            <tbody class="table-primary">
                <tr v-for="a in data">
                    <td>{{a.hid  }}</td>
                    <td>{{a.hname}}</td>
                    <td>{{a.houseArea}}m²</td>
                    <td>{{ a.buildArea }}m²</td>
                    <td>
                        <img :src="'https://localhost:7231'+a.houseImg" style="width: 80px;height: 80px;">
                        <br>
                        <a :href="'https://localhost:7231'+a.houseImg" target="_blank">点击查看户型图</a>
                    </td>
                    <td>{{ a.tname }}</td>
                    <td>
                        <input type="button" value="删除(逻辑)" @click="Del(a.hid)">
                        <input type="button" value="编辑" @click="upds(a.hid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="skip(1)">
        <input type="button" value="上页" @click="skip(2)">
        <input type="button" value="下页" @click="skip(3)">
        <input type="button" value="尾页" @click="skip(4)">
        一共{{can.totalpage }}页，一共{{can.listcount}}条，每页{{can.pageSize}}条，当前{{can.pageIndex}}页
        <select v-model="can.pageSize" @change="tiao">
            <option :value="2">每页2条</option>
            <option :value="3">每页3条</option>
            <option :value="4">每页4条</option>
            <option :value="5">每页5条</option>
        </select>
        <input type="text" v-model="can.pageIndex">
        <button class="btn btn-outline-primary"  @click="page">跳转</button>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref ,onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';


onMounted(() => {
    showdd();
    show();
})
const showdata=ref([{
    "tid": 0,
    "tname": ""
}])

const showdd=()=>{
    axios.get("https://localhost:7231/api/House/GetHouseTypes").then(res=>{
        showdata.value=res.data;
    })
}

const can=ref({
    s:true,
    name:"",
    id:0,
    pageIndex:1,
    pageSize:2,
    listcount:0,
    totalpage:0
})

const data=ref([{
    "hid": 0,
      "hname": "0",
      "houseArea": 0,
      "buildArea": 0,
      "houseImg": "0",
      "tid": 0,
      "isDel": true,
      "tname": "0"
}])

const show=()=>{
    axios.get("https://localhost:7231/api/House/GetHouse",{params:can.value}).then(res=>{
        data.value=res.data.row;
        can.value.listcount=res.data.count;
        can.value.totalpage=Math.ceil(res.data.count/can.value.pageSize);
    })
}


const Del=(s:number)=>{
    if(confirm("确认删除吗？")){
        axios.delete("https://localhost:7231/api/House/DeleteHouse",{params:{id:s}}).then(res=>{
            if(res.data>0){
                alert("删除成功");
                show();
            }else{
                alert("删除失败")
            }
        })
    }
}
const router=useRouter();
//新增
const add=()=>{
    router.push({
        path:'/AddView',
    })
}

const upds=(vid:number)=>{
    router.push({
        path:'/UpdateView',
        query:{id:vid}
    })
}
//排序按钮
const Asc=(px:any)=>{
    if(px==true){
        can.value.s=px;
        show();
    }
    if(px==false){
        can.value.s=px;
        show();
    }
}
//翻页
const skip=(nu:number)=>{
    if(nu==1){
        can.value.pageIndex=1;
        show();
    }
    if(nu==2){
        if(can.value.pageIndex>1){
            can.value.pageIndex-=1;
            show();
        }else{
            alert("超出范围");
        }
    }
    if(nu==3){
        if(can.value.pageIndex<can.value.totalpage){
            can.value.pageIndex+=1;
            show();
        }else{
            alert("超出页码范围")
        }
    }
    if(nu==4){
        can.value.pageIndex=can.value.totalpage;
        show();
    }
}
//改变页容
const tiao=()=>{
    can.value.pageIndex=1;
    show();
}

const page=()=>{
    if(can.value.pageIndex>can.value.totalpage){
        alert("超出最大页码,返回尾页");
        can.value.pageIndex=can.value.totalpage;
        show();
        return;
    }
    if(can.value.pageIndex*0!=0){
        alert("只能输入数字");
        can.value.pageIndex=1;
        show();
        return;
    }
    show();
}


</script>

<style scoped>

</style>